<template>
  <div class="menu">
    <div class="menu-list">
      <ul>
        <li v-for="item in menuImg" :key="item.id" class="menu-list-li" >
          <img :src="item.src">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuImg: [{
        id: 1,
        src: require('@/assets/banner1.png')
      }, {
        id: 2,
        src: require('@/assets/banner2.png')
      }, {
        id: 3,
        src: require('@/assets/banner3.png')
      }, {
        id: 4,
        src: require('@/assets/banner4.png')
      }, {
        id: 5,
        src: require('@/assets/banner5.png')
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
 .menu
  height: 270px
  margin-top: 0
  padding-top: 0
  overflow: hidden
  .menu-list ul
    width: 280px
    margin-top: 0
    padding: 0
    & img
      width: 100%
      height: 100%
      display: inline
      font-size: 0
      cursor: pointer
  .menu-list-li
    list-style-type: none
</style>
